<template>
    <div class='wrapper'>
    <swiper :options="swiperOption">
    
    <swiper-slide data-swiper-autoplay="2000" v-for="item in swiper" :key="item.id">
        <img class='swiper-img' :src="item.imgUrl" alt="">
    </swiper-slide>
    
   
 
    <div class="swiper-pagination"  slot="pagination"></div>
  
   
   </swiper>

    </div>
</template>



<script>
    export default{
        name:'myswiper',
        data () {
            return {
                swiperOption: {
                    loop: true,
                    pagination: '.swiper-pagination',
                    autoplay: 5000
              },
              swiperList:[
                  {
                      id:1001,
                      url:'http://img1.qunarzz.com/piao/fusion/1811/d0/bad815ec5a5e1402.jpg_750x200_b744a695.jpg'
                  },
                  {
                      id:1002,
                      url:'http://img1.qunarzz.com/piao/fusion/1811/d4/7fa0b173c269f802.jpg_750x200_b8d88f51.jpg'
                  },
                   {
                      id:1003,
                      url:'http://img1.qunarzz.com/piao/fusion/1811/b4/ac00a771d74f5a02.jpg_750x200_a71cff60.jpg'
                  }
              ],
              ok:this.swiper
            }
        },
        props: ['swiper']
    }


</script>


<style lang="scss" scoped>
    .wrapper /deep/ .swiper-pagination-bullet-active{
        background-color: #fff;
        z-index:999;
      }
.wrapper{
    width: 100%;
    .swiper-img{
        width: 100%;
       height: 100%;
    }
   
}
</style>

